<template>
  <view>
    <transition-group
      name="barrage"
      class="barrage"
    >
      <view
        v-for="(item, index) in barrageList"
        :key="index"
        class="barrage-item"
      >
        <image
          class="barrage-image"
          :src="
            item.avatar ||
            'https://cdn-prod.findapet.com.cn/default-avator@2x.png'
          "
        ></image>
        <view class="donate-msg-container">
          <view class="content flex align-center">
            <view class="nickname">{{ item.nickname }}</view>
            给它投喂了{{ item.totalPetRation }}g口粮
          </view>
          <view class="time">{{ item.time }}</view>
        </view>
        <u--image
          src="/static/detail/energy.webp"
          radius="0"
          width="92rpx"
          height="56rpx"
        ></u--image>
        <view class="value">+{{ item.loveValue }}</view>
      </view>
    </transition-group>
  </view>
</template>

<script>
export default {
  name: 'sinBarrage',
  props: {
    list: {
      type: Array || Object,
      default() {
        return {};
      },
    },
    rows: {
      type: Number,
      default: 3,
    },
    color: {
      type: String,
      default: '#FFFFFF',
    },
    background: {
      type: String,
      default: '#000000',
    },
    opacity: {
      type: Number,
      default: 0.7,
    },
    left: {
      type: Number,
      default: 35,
    },
    bottom: {
      type: Number,
      default: 120,
    },
    msec: {
      type: Number,
      default: 2000,
    },
  },
  data() {
    return {
      barrageList: [],
    };
  },
  watch: {},
  created() {
    var listLength = this.list.length;
    var currentLength;
    var maxId = listLength;
    if (listLength === 1 || listLength === 2) {
      currentLength = 4;
    } else if (listLength === 3) {
      currentLength = 6;
    }
    for (var i = 0; i < currentLength - listLength; i++) {
      this.list[i].id = i + 1;
      const currentItem = {
        id: maxId + 1 + i,
        userId: this.list[i].userId,
        avatar: this.list[i].avatar,
        nickname: this.list[i].nickname,
        totalPetRation: this.list[i].totalPetRation,
        time: this.list[i].time,
        loveValue: this.list[i].loveValue,
      };
      this.list.push(currentItem);
    }
    setInterval(() => {
      /** 此处逻辑：
       * 设定A数组为展示数组（默认3条数据），B数组为源数组（n条数据）
       * 首次进入页面，因A数组为空，所以根据rows设定每次从B数组头部取1条数据移入A数组尾部
       * 此后，在每个定时周期内，把A数组头部第1条数据移出来，并移入B数组尾部
       * 同时把B数组头部第1条数据移出来，并移入A数组尾部
       * 如此循环即可
       */
      if (this.barrageList.length < this.rows) {
        this.barrageList.push(this.list[0]);
        this.list.splice(0, 1);
      } else {
        const objAFristItem = this.barrageList[0];
        this.barrageList.splice(objAFristItem, 1);
        this.list.push(objAFristItem);
        const objBFirstItem = this.list[0];
        this.list.splice(objBFirstItem, 1);
        this.barrageList.push(objBFirstItem);
      }
    }, this.msec);
  },
};
</script>

<style lang="scss">
.barrage-enter {
  opacity: 0;
  transform: translateY(30px);
}

.barrage-leave-to {
  opacity: 0;
  transform: translateY(0px);
}

.barrage-enter-active {
  // position: absolute;
}

.barrage-leave-active {
  // transition: all .3s;
}

.barrage {
  .barrage-item {
    margin-top: 10rpx;
    display: flex;
    align-items: center;
    background-image: linear-gradient(270deg, #00000000 0%, #000000 100%);
    border-radius: 46rpx;
    padding: 12rpx 8rpx;
    box-sizing: border-box;
    opacity: 0.6;
    transition: all 1s;
    .value {
      font-weight: bold;
      font-size: 60rpx;
      color: #ffffff;
    }
    .donate-msg-container {
      margin-left: 4px;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .content {
        display: flex;
        align-items: center;
        color: #ffffff;
        font-size: 24rpx;
        .nickname {
          margin-right: 2px;
          font-weight: bold;
        }
      }
      .time {
        opacity: 0.6;
        font-weight: 400;
        font-size: 20rpx;
        color: #ffffff;
      }
    }
    .barrage-image {
      display: inline-block;
      vertical-align: middle;
      width: 72rpx !important;
      height: 72rpx !important;
      margin-right: 12rpx;
      border-radius: 30rpx;
    }
  }
}
</style>